<template>
	<div class="login-vue" :style="bg">
		<div class="container">
			<p class="title">SUPER ADMINISTRATOR</p>
			<div class="input-c">
				<!-- <Input prefix="ios-contact" v-model="account" placeholder="请输入用户名" clearable @on-blur="verifyAccount" /> -->
				<el-input class="input" placeholder="请输入用户名" v-model="account" clearable @on-blur="verifyAccount">
					<i slot="prefix" class="el-input__icon el-icon-user" color="#fff"></i>
				</el-input>
				<p class="error">{{ accountError }}</p>
			</div>

			<div class="input-c">
				<!-- <Input type="password" v-model="pwd" prefix="md-lock" placeholder="请输入密码" clearable @on-blur="verifyPwd" /> -->
				<el-input class="input" type="password" placeholder="请输入密码" v-model="pwd" clearable @on-blur="verifyPwd">
					<i slot="prefix" class="el-input__icon el-icon-lock" color="#fff"></i>
				</el-input>
				<p class="error">{{ pwdError }}</p>
			</div>
			<el-button class="submit" type="primary" @click="submit">登录</el-button>
		</div>
	</div>
</template>

<script>
import { superlogin } from '../../api/api';
import { jwtDecode } from 'jwt-decode';
import bgImg from '@/assets/img/upload/bg.png';
export default {
	name: 'login',
	data() {
		return {
			account: 'admin',
			pwd: '',
			accountError: '',
			pwdError: '',
			bg: {}
		};
	},
	created() {
		this.bg.backgroundImage = 'url(' + bgImg + ')';
	},
	methods: {
		verifyAccount() {
			if (this.account !== 'admin') {
				this.accountError = '';
			} else {
				this.accountError = '';
			}
		},
		verifyPwd() {
			if (this.pwd !== '123456') {
				this.pwdError = '';
			} else {
				this.pwdError = '';
			}
		},
		submit() {
			if (this.account === null || this.account === '') {
				this.$message.info('请输入用户名');
				return;
			} else if (this.pwd === null || this.pwd === '') {
				this.$message.info('请输入密码');
				return;
			}
			let self = this;
			superlogin(this.account, this.pwd)
				.then(function (resp) {
					if (resp.status === 200) {
						if (resp.data.code === 200) {
							let result = jwtDecode(resp.data.data.accessToken);
							console.log(result);
							localStorage.setItem('name', self.account);
							localStorage.setItem('superAdminToken', resp.data.data.accessToken);
							localStorage.setItem('userId', result.data.id);
							localStorage.setItem('ticket', resp.data.data.ticket);
							self.$router.push('/superadmin');
						} else {
							self.$message.error(resp.data.description);
						}
					}
				})
				.catch(function (error) {
					self.$requestApiError(error, () => {
						self.$router.push('/');
					});
				});
		}
	}
};
</script>

<style lang="less" scoped>
.login-vue {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
}
.login-vue .container {
	background: rgba(255, 255, 255, 0.5);
	width: 300px;
	text-align: center;
	border-radius: 10px;
	padding: 30px;
	box-sizing: border-box;
}
.login-vue .ivu-input {
	background-color: transparent;
	color: #fff;
	outline: #fff;
	border-color: #fff;
}
.login-vue ::-webkit-input-placeholder {
	/* WebKit, Blink, Edge */
	color: rgba(255, 255, 255, 0.8);
}
.login-vue :-moz-placeholder {
	/* Mozilla Firefox 4 to 18 */
	color: rgba(255, 255, 255, 0.8);
}
.login-vue ::-moz-placeholder {
	/* Mozilla Firefox 19+ */
	color: rgba(255, 255, 255, 0.8);
}
.login-vue :-ms-input-placeholder {
	/* Internet Explorer 10-11 */
	color: rgba(255, 255, 255, 0.8);
}
.login-vue .title {
	font-size: 16px;
	margin-bottom: 20px;
}
.login-vue .input-c {
	margin: auto;
	width: 200px;
}
.login-vue .error {
	color: red;
	text-align: left;
	margin: 5px auto;
	font-size: 12px;
	padding-left: 30px;
	height: 20px;
}
.login-vue .submit {
	width: 200px;
}
.login-vue .account {
	margin-top: 30px;
}
.login-vue .account span {
	cursor: pointer;
}
.login-vue .ivu-icon {
	color: #eee;
}
.login-vue .ivu-icon-ios-close-circle {
	color: #777;
}
/deep/ .el-input__inner {
	background-color: transparent;
	color: #fff;
	outline: #fff;
	border-color: #fff;
}
/deep/ .el-input__icon {
	color: #fff;
	line-height: 33px;
}
</style>
